<!--  -->
<template>
  <div class="container">
    <div>
      <h3 ref="div">叩丁狼商品管理系统</h3>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="" prop="username" class="ipt-item">
          <el-input
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
            placeholder="请输入账号"
            class="ipt"
          />
        </el-form-item>
        <el-form-item label="" prop="pwd" class="ipt-item">
          <el-input
            v-model="ruleForm.pwd"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
            class="ipt"
          />
        </el-form-item>
        <el-form-item class="ipt-item">
          <el-button class="submit" type="primary" @click="loginFn(ruleFormRef)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import type { FormInstance } from "element-plus";
import { adminLogin, getAdminInfo } from "../../request/http";
import Cookies from "js-cookie";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();

const div = ref<HTMLDivElement>();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: "admin",
  pwd: "123456",
});

// 登录发起请求
const validateUsername = (
  rule: unknown,
  value: string | undefined,
  callback: (msg?: string) => void
) => {
  if (!value) {
    callback("账号不能为空");
  } else if (value !== ruleForm.username) {
    callback("用户名错误");
  } else {
    callback();
  }
};
const validatePwd = (
  rule: unknown,
  value: string | undefined,
  callback: (msg?: string) => void
) => {
  if (!value) {
    callback("密码不能为空");
  } else if (value !== ruleForm.pwd) {
    callback("密码错误");
  } else {
    callback();
  }
};

const rules = reactive({
  username: [{ validator: validateUsername, trigger: "blur" }],
  pwd: [{ validator: validatePwd, trigger: "blur" }],
});

const loginFn = async (formRef?: FormInstance) => {
  let res = await ruleFormRef.value?.validate();
  if (res) {
    let { code, data } = await adminLogin({
      username: ruleForm.username,
      password: ruleForm.pwd,
    });
    if (code === 200) {
      // 使用第三方包 npm i js-cookie  引入cookie存储
      Cookies.set("token", data.tokenHead + data.token, { expires: 7 });

      // let adminInfo = await getAdminInfo();
      // if (adminInfo.code === 200) {
      //   // 将数据存放到vuex
      //   store.commit("updateMenus", adminInfo.data.menus);
      //   // 页面跳转到首页  一定要配置router 里面的路由
      //   router.push("/home");
      // }
      // 将上面的代码封装到actions
      await store.dispatch("getAdminInfo");
      router.push("/home");
    }
  }
};

// const loginFn = (formRef?: FormInstance) => {
//   adminLogin({
//     username: ruleForm.username,
//     password: ruleForm.pwd,
//   }).then((res) => {
//     console.log(res);
//   });
// };

// 登录按钮的点击事件方法
// const loginFn = (formRef?: FormInstance) => {
//   console.log(div.value?.innerText);
// };
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #2d3a4b;
  h3 {
    width: 420px;
    text-align: center;
    // padding: 10px 0;
    font-size: 24px;
    color: #fff;
  }
  .demo-ruleForm {
    width: 420px;
    height: 250px;
    .ipt-item {
      margin-left: -120px;
      margin-top: 20px;
      // background: red;
    }
    .ipt {
      width: 100%;
      height: 50px;
      // padding: 10px;
      color: #fff;
    }

    .submit {
      width: 100%;
      height: 50px;
    }
  }
}
</style>
